<template>
  <div>
    <ul class="tap_Top_box">
      <li
        v-for="(item, index) in activeList"
        :class="{ active: activeName === item.value }"
        @click="handleClick(item)"
        :key="index"
      >
        {{ item.name }}
      </li>
    </ul>

    <div class="over" v-show="activeName == 'first'">
      <div style="margin: 10px 0 10px 0;font-weight: 700;font-size: 17px;">预约状态</div>

      <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedCities"
        style="display: flex; flex-direction: column"
        @change="changaCities"
      >
        <el-checkbox
          v-for="(item, index) in sysUserSexerm_reservation_statusOptions"
          :label="item.dictValue"
          :key="item.dictValue"
          :class="getClass(index)"
          >{{ item.dictLabel }}</el-checkbox
        >
      </el-checkbox-group>
    </div>

    <div class="over" v-show="activeName == 'second'">
      <div>
        <div style="font-weight: 700;font-size: 17px;"> 出诊医生 </div>
        <div style="color: #67696b;margin-top: 3px;"> 出诊时间 : 早8点至晚22点 </div>
      </div>
      <ul class="bottom_box">
        <li v-for="(item , index) in doctorList" :key="index">
          <div class="big">
            <img :src="baseUrl + item.avatar" alt="">
  
            <div class="two">
              <span>{{ item.nickName }}</span>
              <span style="color: #67696b;margin-top: 3px;">{{ item.deptName }}</span>
            </div>
          </div>
          <div class="three" v-if="!item.isFree">
            空闲
          </div>
          <div class="three" v-else>
            忙碌
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { sysUserSexerm_reservation_status , doctorList } from '@/api/allApi.js'
export default {
  name: 'EitcErmPcBottomSelect',

  data() {
    return {
      activeList: [
        {
          name: '预约筛选',
          value: 'first'
        },
        {
          name: '出诊医生',
          value: 'second'
        }
      ],
      baseUrl: process.env.VUE_APP_BASE_API,
      checkedCities: [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8'
        ],
      isIndeterminate: true,
      activeName: 'first',
      checkAll: true,
      doctorList: [],
      sysUserSexerm_reservation_statusOptions: []
    }
  },
  watch: {
    // 监听 items 数组的变化，当所有项目都被选中时，自动全选
    checkedCities: {
      handler() {
        this.checkAll = this.checkedCities.length === this.sysUserSexerm_reservation_statusOptions.length
        console.log(this.checkAll,88888);
      },
      deep: true // 深度监听
    }
  },

  mounted() {
    this.initsysUserSexerm_reservation_status()

    this.$emit('checkedCities', [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8'
        ])
  },

  methods: {
    async initsysUserSexerm_reservation_status() {
      const res = await sysUserSexerm_reservation_status()
      this.sysUserSexerm_reservation_statusOptions = res.data.map((item) => {
        item.checked = false
        switch (item.dictLabel) {
          case '预约':
            item.color = '#0077fa'
            break
          case '已确定':
            item.color = '#00f900'
            break
          case '已到店':
            item.color = '#4f9de7'
            break
          case '待复诊':
            item.color = '#93d2f3'
            break
          case '治疗完成':
            item.color = '#fb881a'
            break
          case '已结账':
            item.color = '#1afb91'
            break
          case '已离开':
            item.color = '#8a8385'
            break
          case '已失约':
            item.color = '#cbcbcb'
            break
          default:
            break
        }
        return item
      })
    },
    changaCities(){
      this.$emit('checkedCities', this.checkedCities)
    },
    handleClick(val) {
      this.activeName = val.value
      switch (this.activeName) {
        case 'first':
          this.initsysUserSexerm_reservation_status()
          break
        case 'second':
          this.initDoctorList()
          break
        default:
          break
      }
    },
    handleCheckAllChange(val) {
      if (val) {
        this.checkedCities = [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8'
        ]
      } else {
        this.checkedCities = ["0"]
      }
      this.$emit('checkedCities', this.checkedCities)
    },
    getClass(index) {
      return 'box' + (index+1)
    },
    async initDoctorList(){
      const res  = await doctorList()
      this.doctorList = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.tap_Top_box {
  display: flex;
  margin-top: 0;
  padding-left: 10px;

  li {
    margin-right: 20px;
    padding: 10px;
    width: 90px;
    text-align: center;
    cursor: pointer;
    list-style: none;
  }

  .active {
    color: #37b64a;
    border-bottom: 3px solid #37b64a;
  }
}
.over {
  overflow: auto;
  padding-left: 40px;
  // background-color: #fff;
}

.checkbox {
  margin-top: 3px;
}

.box1 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #0077fa;
    border-color: #0077fa;
  }
}
.box2 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #00f900;
    border-color: #00f900;
  }
}
.box3 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #4f9de7;
    border-color: #4f9de7;
  }
}
.box4 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #93d2f3;
    border-color: #93d2f3;
  }
}
.box5 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #fb881a;
    border-color: #fb881a;
  }
}
.box6 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #1afb91;
    border-color: #1afb91;
  }
}
.box7 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #8a8385;
    border-color: #8a8385;
  }
}
.box8 {
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #cbcbcb;
    border-color: #cbcbcb;
  }
}
.bottom_box {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    margin-left: 0;
    margin-top: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .big {
      display: flex;
    }

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .two {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
    }
    .three {
      width: 60px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      margin-right: 40px;
      border-radius: 10%;
    }
  }
}
</style>